<template>
  <div class="">
    <div class="initials">热门城市</div>
    <div class="cities">
      <ul class="cityul">
        <li
          v-for="item in hotCityLists"
          :key="item.id"
          @click="toCity({ id: item.id, name: item.name })"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: ["hotCityLists", "allCity"],
  components: {},
  data() {
    return {};
  },
  methods: {
    toCity(e) {
      this.$router.push("/city?id=" + e.id);
      this.$store.state.nowCity = e;
    },
  },
  created() {},
};
</script>

<style scoped lang="css">
.initials {
  border-bottom: 1px solid #e5e5e5;
  height: 1.875rem;
  line-height: 1.875rem;
  padding-left: 10px;
  font-size: 13px;
}
.cityul {
  display: flex;
  list-style: none;
  justify-content: space-around;
  flex-flow: wrap;
}
.cityul li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24%;
  border-bottom: 1px solid #e4e4e4;
  border-right: 1px solid #e4e4e4;
  height: 2.375rem;
  font-size: 0.875rem;
  color: #3190e8;
}
</style>
